import {designPage, reactive, useRefs} from "@peryl/react-compose";
import {$message, AddressCascade, Button, Checkbox, CheckboxGroup, ColorPicker, DatePicker, Form, FormItem, i18n, Icon, Input, InputMode, InputNumber, PageCard, PageCardContent, PageCardTitle, Radio, RadioGroup, Rate, Segment, SegmentGroup, Select, SelectOption, Slider, Space, TimePicker, Toggle, Tooltip, useStyle} from "plain-design";

export default designPage(() => {

  const { styleComputed } = useStyle();

  const { refs, onRef } = useRefs({
    form: Form,
  });

  const state = reactive({
    inputMode: styleComputed.value.default.inputMode || InputMode.flat,
    formData: {
      field1: '111',
      field2: '222',
      field11: 25,
    } as any,
    disabled: undefined as undefined | boolean,
    showFlag: true,
    verticalLabel: i18n.state.currentLang === 'en-us',
    column: 1,
  });

  const { formData } = state;

  const levelData = [
    { levelName: i18n.$intl('page.formElementsPage.levels.0').d('一级'), code: '0x01' },
    { levelName: i18n.$intl('page.formElementsPage.levels.1').d('二级'), code: '0x02' },
    { levelName: i18n.$intl('page.formElementsPage.levels.2').d('三级'), code: '0x03' },
  ];

  async function saveValidate() {
    await refs.form!.validate();
    $message.success(i18n.$intl('page.formElementsPage.validatePass').d('校验通过'));
  }

  return () => (
    <PageCard>
      <PageCardTitle title={i18n.$intl('page.formElementsPage.title').d('表单组件')}/>
      <PageCardContent>
        <Form
          inputMode={state.inputMode}
          ref={onRef.form}
          modelValue={formData}
          disabled={state.disabled}
          singleColumnCenter={state.column === 1}
          verticalLabel={state.verticalLabel}
          column={state.column}
        >
          <FormItem label={i18n.$intl('page.formElementsPage.labelDirection').d("文字方向")}>
            <SegmentGroup v-model={state.verticalLabel}>
              <Segment label={i18n.$intl('page.formElementsPage.labelDirectionOptions.horizontal').d("横向")} val={false}/>
              <Segment label={i18n.$intl('page.formElementsPage.labelDirectionOptions.vertical').d("纵向")} val={true}/>
            </SegmentGroup>
          </FormItem>
          <FormItem label={i18n.$intl('page.formElementsPage.inputMode').d("输入框类型")}>
            <SegmentGroup v-model={state.inputMode}>
              <Segment label={i18n.$intl('page.formElementsPage.inputModeOptions.flat').d("填充")} val="flat"/>
              <Segment label={i18n.$intl('page.formElementsPage.inputModeOptions.stroke').d("线性")} val="stroke"/>
              <Segment label={i18n.$intl('page.formElementsPage.inputModeOptions.text').d("文本")} val="text"/>
            </SegmentGroup>
          </FormItem>
          <FormItem label={i18n.$intl('page.formElementsPage.columns').d("列数")}>
            <SegmentGroup v-model={state.column}>
              <Segment label={i18n.$intl('page.formElementsPage.columnOptions.0').d("一列")} val={1}/>
              <Segment label={i18n.$intl('page.formElementsPage.columnOptions.1').d("二列")} val={2}/>
              <Segment label={i18n.$intl('page.formElementsPage.columnOptions.2').d("三列")} val={3}/>
            </SegmentGroup>
          </FormItem>
          <FormItem label={i18n.$intl('page.formElementsPage.normalField').d('普通文本框')} field={'field1'} required>
            <Input v-model={formData.field1} placeholder={i18n.$intl('page.formElementsPage.pleaseInputText').d('请输入文本')}/>
          </FormItem>
          <FormItem label={i18n.$intl('page.formElementsPage.normalField').d('普通文本框')} field={'field2'} required>
            <Input v-model={formData.field2} placeholder={i18n.$intl('page.formElementsPage.pleaseInputText').d('请输入文本')}/>
          </FormItem>
          <FormItem label={i18n.$intl('page.formElementsPage.normalTextarea').d('普通文本域')} field={'field2'} required>
            <Input v-model={formData.field2} textarea placeholder={i18n.$intl('page.formElementsPage.pleaseInputText').d('请输入文本')}/>
          </FormItem>
          <FormItem
            label={i18n.$intl('page.formElementsPage.normalNumber').d('数字框')}
            field={'field3'}
            rules={{ type: 'number', max: 100, message: i18n.$intl('page.formElementsPage.numberMaxMessage').d('最大值100') }}
            required
            v-slots={{
              default: () => <InputNumber key={'input'} v-model={formData.field3} placeholder={i18n.$intl('page.formElementsPage.numberPlaceholder').d('请输入数字')}/>,
              append: () => <Tooltip message={i18n.$intl('page.formElementsPage.tips').d('提示')} key={'suffix'}><Icon icon={'pi-question-circle-fill'}/></Tooltip>,
            }}
          />
          <FormItem
            label={i18n.$intl('page.formElementsPage.checkbox').d('复选框')}
            field={'field5'}
            rules={{ min: 1, max: 3, type: 'array', message: i18n.$intl('page.formElementsPage.checkboxValidateMessage').d('1-3个元素') }}
            required>
            <CheckboxGroup v-model={formData.field5} itemWidth={'50%'}>
              <Checkbox checkboxForAll label={i18n.$intl('page.formElementsPage.checkboxOptions.all').d("全部")}/>
              <Checkbox label={i18n.$intl('page.formElementsPage.checkboxOptions.big').d("大客户")} val="large"/>
              <Checkbox label={i18n.$intl('page.formElementsPage.checkboxOptions.potential').d("潜在客户")} val="potential"/>
              <Checkbox label={i18n.$intl('page.formElementsPage.checkboxOptions.long').d("长久客户")} val="long"/>
              <Checkbox label={i18n.$intl('page.formElementsPage.checkboxOptions.order').d("赢单客户")} val="order"/>
            </CheckboxGroup>
          </FormItem>
          <FormItem
            label={i18n.$intl('page.formElementsPage.select').d('下拉选项')}
            field={'field6'}
            required
            rules={{ message: i18n.$intl('page.formElementsPage.selectValidateMessage').d('只能选择二级'), enum: ['0x02'] }}
          >
            <Select v-model={formData.field6} placeholder={i18n.$intl('page.formElementsPage.selectPlaceholder').d('请选择')}>
              {levelData.map(item => <SelectOption label={item.levelName} val={item.code} key={item.code}/>)}
            </Select>
          </FormItem>
          <FormItem
            label={i18n.$intl('page.formElementsPage.multipleSelect').d('下拉选项(多选)')}
            field={'field62'}
            required
            rules={{ required: true, type: 'array', min: 2, message: i18n.$intl('page.formElementsPage.multipleSelectValidateMessage').d('最少选择两项') }}
          >
            <Select v-model={formData.field62} placeholder={i18n.$intl('page.formElementsPage.selectPlaceholder').d('请选择')} multiple>
              {levelData.map(item => <SelectOption label={item.levelName} val={item.code} key={item.code}/>)}
            </Select>
          </FormItem>
          <FormItem label={i18n.$intl('page.formElementsPage.address').d('地址选择')} field={'districtVal'} required>
            <AddressCascade
              placeholder={i18n.$intl('page.formElementsPage.selectPlaceholder').d('请选择')}
              v-model:province={formData.provinceVal}
              v-model:city={formData.cityVal}
              v-model:district={formData.districtVal}
            />
          </FormItem>
          {!!formData.districtVal && (
            <FormItem label={i18n.$intl('page.formElementsPage.address').d('地址选择')}>
              {formData.provinceVal} / {formData.cityVal} / {formData.districtVal}
            </FormItem>
          )}
          <FormItem label={i18n.$intl('page.formElementsPage.radioGroup').d('单选按钮')} field={'field9'} required>
            <RadioGroup v-model={formData.field9} itemWidth="33%">
              <Radio label={i18n.$intl('page.formElementsPage.radioOptions.yes').d("是")} val="Y"/>
              <Radio label={i18n.$intl('page.formElementsPage.radioOptions.no').d("否")} val="N"/>
              <Radio label={i18n.$intl('page.formElementsPage.radioOptions.unknown').d("未知")} val="NO"/>
            </RadioGroup>
          </FormItem>
          <FormItem
            label={i18n.$intl('page.formElementsPage.toggle').d('开关按钮')}
            field={'field10'}
            rules={{ message: i18n.$intl('page.formElementsPage.toggleValidateMessage').d('请阅读并同意使用协议'), enum: [true] }}
          >
            <Toggle v-model={formData.field10}/>
          </FormItem>
          <FormItem label={i18n.$intl('page.formElementsPage.slide').d('滑块')} field={'field11'} required rules={{ min: 50, type: 'number', message: i18n.$intl('page.formElementsPage.slideValidateMessage').d('最小值50') }}>
            <Slider v-model={formData.field11}/>
          </FormItem>
          <FormItem
            label={i18n.$intl('page.formElementsPage.tagsInput').d('标签输入框')}
            field={'field12'}
            required
            rules={[
              { min: 3, type: 'array', message: i18n.$intl('page.formElementsPage.tagsInputValidateMessage1').d('最少输入3个标签') },
              { max: 5, type: 'array', message: i18n.$intl('page.formElementsPage.tagsInputValidateMessage2').d('最多5个标签') }
            ]}
          >
            <Input multiple v-model={formData.field12} placeholder={i18n.$intl('page.formElementsPage.pleaseInputText').d('请输入文本')}/>
          </FormItem>
          <FormItem
            label={i18n.$intl('page.formElementsPage.star').d('评分')}
            field={'field13'}
            required
            rules={{ min: 1, type: 'number', message: i18n.$intl('page.formElementsPage.starValidateMessage').d('最低1分') }}
          >
            <Rate v-model={formData.field13}/>
          </FormItem>
          <FormItem
            label={i18n.$intl('page.formElementsPage.colorPicker').d('颜色选择器')}
            field={'field14'}
            rules={{ required: true, message: i18n.$intl('page.formElementsPage.colorPickerValidateMessage').d('颜色不能为空') }}
          >
            <ColorPicker v-model={formData.field14} placeholder={i18n.$intl('page.formElementsPage.selectPlaceholder').d('请选择')}/>
          </FormItem>
          <FormItem label={i18n.$intl('page.formElementsPage.timePicker').d('时间选择')} field={'field15'} required>
            <TimePicker v-model={formData.field15} placeholder={i18n.$intl('page.formElementsPage.selectPlaceholder').d('请选择')}/>
          </FormItem>
          <FormItem label={i18n.$intl('page.formElementsPage.timeRangePicker').d('时间范围选择')} rules={[
            { field: 'field17', required: true },
            { field: 'field18', required: true },
          ]}>
            <TimePicker v-model:start={formData.field17} v-model:end={formData.field18} range/>
          </FormItem>
          <FormItem label={i18n.$intl('page.formElementsPage.datetimePicker').d('日期时间选择')} field={'field19'} required>
            <DatePicker v-model={formData.field19} datetime placeholder={i18n.$intl('page.formElementsPage.selectPlaceholder').d('请选择')}/>
          </FormItem>

          <FormItem label={i18n.$intl('page.formElementsPage.isShowDatePicker').d("是否填写日期")}>
            <Toggle v-model={state.showFlag}/>
          </FormItem>
          {!!state.showFlag && (
            <FormItem label={i18n.$intl('page.formElementsPage.datetimeRangePicker2').d("日期时间范围选择(2)")} rules={[
              { field: 'field20', required: true },
              { field: 'field21', required: true },
            ]}>
              <DatePicker separate v-model:start={formData.field20} v-model:end={formData.field21} range datetime/>
            </FormItem>
          )}
          <FormItem label={i18n.$intl('page.formElementsPage.datetimeRangePicker1').d("日期时间范围选择(1)")}>
            <DatePicker v-model:start={formData.field22} v-model:end={formData.field23} range datetime displayFormat={
              i18n.state.currentLang === 'zh-cn' ? 'YYYY年MM月DD日HH时mm分ss秒' : 'YYYY/MM/DD HH:mm:ss'
            }/>
          </FormItem>

          <FormItem label={i18n.$intl('page.formElementsPage.textarea').d("文本域")} field="field22" required block>
            <Input textarea v-model={formData.field22}/>
          </FormItem>
          <FormItem colon={false}>
            <Space>
              <Button label={i18n.$intl('page.formElementsPage.validate').d('校验')} onClick={saveValidate}/>
              <Button label={i18n.$intl('page.formElementsPage.clearValidate').d('清空校验')} onClick={() => refs.form!.clearValidate()}/>
              <Button label={state.disabled ?
                i18n.$intl('page.formElementsPage.enable').d('启用') :
                i18n.$intl('page.formElementsPage.disable').d('禁用')
              } onClick={() => state.disabled = !state.disabled} disabled={false}/>
            </Space>
          </FormItem>
        </Form>
      </PageCardContent>
    </PageCard>
  );
});
